<link rel="stylesheet" type="text/css" href="/assets/third-party/datatables/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/assets/css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="/assets/third-party/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">

<style type="text/css">
	.il{
		display: inline;
	}
	.form-group .control-label{
		padding-right: 5px;
	}
	.form-group .col-sm-7{
		padding-left: 5px;
	}
	.form-group input, .form-group select{
		width: 88%;
		display: inline;
	}
</style>

<div class="container" style="margin-top: 60px;">
	<div class="row">
		<div class="col-lg-12">
			<select id="member_level" class="form-control" style="display: inline; width: 120px;">
				<option value="">所有级别</option>
				<?php foreach ($levels as $key => $value) { ?>
				<option value="<?php echo $value->name; ?>"><?php echo $value->name; ?></option>
				<?php } ?>
			</select>
			<a href="#" class="btn btn-info"  data-toggle="modal" data-target="#memberLevelManagerModal"> <i class="fa fa-plus"></i> 会员级别设置 </a>
			<!--<a href="#" class="btn btn-info"> <i class="fa fa-search"></i> 查询 </a> -->
			<a href="#" class="btn btn-success" data-toggle="modal" data-target="#memberModal"> <i class="fa fa-plus"></i> 新增会员 </a>
			<!--<a href="#" class="btn btn-success"> <i class="fa fa-plus"></i> 全选 </a>
			<a href="#" class="btn btn-danger"> <i class="fa fa-plus"></i> 批量删除 </a>
			<a href="#" class="btn btn-danger"> <i class="fa fa-plus"></i> 刷新 </a>-->
		</div>
	</div>
	<div class="row" style="margin-top: 10px;">
		<div class="col-lg-12">
			<div class="panel panel-default">
                <div class="panel-heading">
                    会员列表
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
					<table id="memberList" class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>ID</th>
								<th>会员卡号</th>
								<th>会员姓名</th>
								<th>手机号码</th>
								<th>Email</th>
								<th>会员级别</th>
								<th>学生</th>
								<th>注册时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<?php foreach ($items as $key => $value) { ?>
							<tr data-id="<?php echo $value->id; ?>"<?php echo $value->is_new ? ' class="success" style="color: red;"' : ''; ?>>
								<td><?php echo $value->id; ?></td>
								<td><?php echo $value->no; ?></td>
								<td><?php echo $value->people && $value->people->first_name ? $value->people->first_name . $value->people->last_name : '-'; ?></td>
								<td><?php echo $value->people && $value->people->phone ? $value->people->phone : '-'; ?></td>
								<td><?php echo $value->people && $value->people->email ? $value->people->email : '-'; ?></td>
								<td><?php echo $value->level && $value->level->name ? $value->level->name : '-'; ?></td>
								<td>
									<?php foreach ($value->students as $key => $value) { ?>
										<?php echo $value->people->first_name . $value->people->last_name . ','; ?>
									<?php } ?>
								</td>
								<td><?php echo date('Y-m-d H:i:s', $value->created_at); ?></td>
								<td>
									<a class="btn btn-sm btn-info" data-toggle="modal" data-target="#memberLevelModal"> <i class="fa fa-pencil-square-o"></i> 设调级别 </a>
									<a role="edit" class="btn btn-sm btn-info" data-toggle="modal" data-target="#memberModal"> <i class="fa fa-pencil-square-o"></i> 编辑 </a>
									<a href="#" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#confirmMemberModal"> <i class="fa fa-trash-o"></i> 删除 </a>
								</td>
							</tr>
							<?php } ?>							
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 会员详情模态框 -->
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalTitle" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title" id="memberModalTitle"> 会员资料 </h4>
			</div>
			<div class="modal-body">
				<form id="frmMember" role="form" action="" method="post" data-parsley-validate>
					<div class="form-group">
						<label for="phone">会员卡号</label>
						<input type="text" class="form-control" id="no" name="no" placeholder="系统自动生成的会员卡号" value="" required>
					</div>
					<div class="form-group">
						<label for="phone">实体卡号</label>
						<input type="text" class="form-control" id="real_no" name="real_no" placeholder="没有实体卡可不填写">
					</div>
					<div class="form-group">
						<label for="first_name">会员姓名</label>
						<input type="text" class="form-control" id="first_name" name="first_name" placeholder="姓" style="width: 44%; display: inline;" required  data-parsley-errors-container="#name_help_block">
						<input type="text" class="form-control" id="last_name" name="last_name" placeholder="名" style="width: 44%; display: inline;">
						<p id="name_help_block"></p>
					</div>
					<div class="form-group">
						<label for="nickname">会员昵称</label>
						<input type="text" class="form-control" id="nickname" name="nickname" placeholder="昵称">
					</div>
					<div class="form-group">
						<label for="phone">会员性别</label>
						<select id="gender" name="gender" class="form-control">
							<option value="">保密</option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
					<div class="form-group">
						<label for="birthday">会员生日</label>
						<input type="text" class="form-control" id="birthday" name="birthday" placeholder="点击选择生日" role="datetime">
					</div>
					<div class="form-group">
						<label for="level_id">会员等级</label>
						<select id="level_id" name="level_id" class="form-control" required>
							<?php foreach ($levels as $key => $value) { ?>
							<option value="<?php echo $value->id; ?>"><?php echo $value->name; ?></option>
							<?php } ?>
						</select>
					</div>
					<div class="form-group">
						<label for="tel">家庭电话</label>
						<input type="text" class="form-control" id="tel" name="tel" placeholder="家庭电话">
					</div>
					<div class="form-group">
						<label for="phone">手机号码</label>
						<input type="text" class="form-control" id="phone" name="phone" placeholder="手机号码" required>
					</div>
					<div class="form-group">
						<label for="email">邮箱地址</label>
						<input type="text" class="form-control" id="email" name="email" placeholder="邮箱地址">
					</div>
					<div class="form-group">
						<label for="qq">Q Q 号码</label>
						<input type="text" class="form-control" id="qq" name="qq" placeholder="QQ号码">
					</div>
					<div class="form-group">
						<label for="is_new">新&nbsp;&nbsp;会&nbsp;&nbsp;员</label>
						<select class="form-control" name="is_new" id="is_new">
							<option value="0">否</option>
							<option value="1">是</option>
						</select>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
				<button type="button" id="btnSave" class="btn btn-primary"> 保存 </button>
			</div>
		</div>
	</div>
</div>

<!-- 调整会员级别模态框 -->
<div class="modal fade" id="memberLevelModal" tabindex="-1" role="dialog" aria-labelledby="memberLevelTitle" aria-hidden="true">
	<div class="modal-dialog" style="width: 300px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title" id="memberLevelTitle">调整会员级别</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form">
					<div class="form-group">
						<label for="no" class="col-sm-5 control-label">会员卡号：</label>
						<div class="col-sm-7">
							<p class="form-control-static" id="label_no"></p>
						</div>
					</div>
					<div class="form-group">
						<label for="nickname" class="col-sm-5 control-label">会员昵称：</label>
						<div class="col-sm-7">
							<p class="form-control-static" id="label_nickname"></p>
						</div>
					</div>
					<div class="form-group">
						<label for="nickname" class="col-sm-5 control-label">手机号码：</label>
						<div class="col-sm-7">
							<p class="form-control-static" id="label_phone"></p>
						</div>
					</div>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-5 control-label">当前级别：</label>
						<div class="col-sm-7">
							<p class="form-control-static" id="label_level_id">入门会员</p>
						</div>
					</div>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-5 control-label">目标级别：</label>
						<div class="col-sm-7">
							<select id="target" class="form-control" style="width: 120px;">
								<?php foreach ($levels as $key => $value) { ?>
								<option value="<?php echo $value->id; ?>"><?php echo $value->name; ?></option>
								<?php } ?>
							</select>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"> 关闭 </button>
				<button id="btnChangeLevel" data-id="" type="button" class="btn btn-primary"> 保存设置 </button>
			</div>
		</div>
	</div>
</div>

<!-- 会员级别管理模态框 -->
<div class="modal fade" id="memberLevelManagerModal" tabindex="-1" role="dialog" aria-labelledby="memberLevelManagerModalTitle" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title" id="memberLevelManagerModalTitle">会员级别设置</h4>
			</div>
			<div class="modal-body">
				<a href="#" class="btn btn-success" id="btnAddLevel"> <i class="fa fa-plus"></i> 新增级别 </a>
				<table class="table table-bordered table-hover" style="margin-top: 10px;">
					<thead>
						<tr>
							<th>ID</th>
							<th>会员级别</th>
							<th>折扣</th>
							<th>排序</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="member-levels">
						<?php foreach ($levels as $level) { ?>
						<tr data-id="<?php echo $level->id; ?>">
							<td><?php echo $level->id; ?></td>
							<td><span><?php echo $level->name; ?></span><input class="hide" type="text" value="<?php echo $level->name; ?>" style="width: 70px;"/></td>
							<td><span><?php echo $level->discount; ?></span><input class="hide" type="text" value="<?php echo $level->discount; ?>" placeholder="折扣" style="width: 30px;" /></td>
							<td><span><?php echo $level->sort; ?></span><input class="hide" type="text" value="<?php echo $level->sort; ?>" placeholder="排序" style="width: 30px;" /></td>
							<td>
								<a role="save" class="btn btn-sm btn-success hide"> <i class="fa fa-check"></i> 保存 </a>
								<a role="edit" class="btn btn-sm btn-info"> <i class="fa fa-pencil-square-o"></i> 编辑 </a>
								<a role="del" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#confirmModal"> <i class="fa fa-trash-o"></i> 删除 </a>
							</td>
						</tr>
						<?php } ?>							
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>


<!-- 确认删除模态框 -->
<div class="modal fade" id="confirmMemberModal" tabindex="-1" role="dialog" aria-labelledby="confirmMemberModalTitle" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<div class="alert alert-warning">
					<strong>确定删除？</strong>
					<p>删除该会员，所有与该会员相关的数据将全部被清空!</p>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
				<button type="button" id="btnConfirmMember" class="btn btn-danger"> 确定 </button>
			</div>
		</div>
	</div>
</div>


<!-- 确认删除模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalTitle" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title" id="confirmModalTitle">确定要删除该记录？</h4>
			</div>
			<div class="modal-body">
				<div class="alert alert-warning">
					<h3>删除该级别，所有与该级别相关的会员数据将全部被清空!</h3>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
				<button id="btnConfirm" type="button" class="btn btn-danger"> 确认删除 </button>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="/assets/third-party/jquery-tmpl-master/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="/assets/third-party/jquery-tmpl-master/jquery.tmplPlus.min.js"></script>
<script type="text/x-jquery-tmpl" id="tr">
<tr>
	<td>${id}</td>
	<td><span class="hide">${name}</span><input type="text" value="${name}" placeholder="级别名称"  style="width: 70px;"/></td>
	<td><span class="hide">${sort}</span><input type="text" value="${sort}" placeholder="排序" style="width: 30px;" /></td>
	<td>
		<a role="save" class="btn btn-sm btn-success"> <i class="fa fa-check"></i> 保存 </a>
		<a role="edit" class="btn btn-sm btn-info hide"> <i class="fa fa-pencil-square-o"></i> 编辑 </a>
		<a role="del" class="btn btn-sm btn-danger hide"> <i class="fa fa-trash-o"></i> 删除 </a>
	</td>
</tr>
</script>

<script type="text/javascript" src="/assets/third-party/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/assets/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
	var flag = false;
	$(function(){

		$('#memberList').dataTable({
	        "oLanguage": {
	            "sLengthMenu": "每页显示 _MENU_ 条记录",
	            "sZeroRecords": "很抱歉，未找到相关数据",
	            "sInfo": "从 _START_ 至 _END_ /共 _TOTAL_ 条数据",
	            "sInfoEmpty": "没有符合条件的数据",
	            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
	            "sSearch": "搜索：",
	            "oPaginate": {  
					"sFirst": "首页",  
					"sPrevious": "上一页",
					"sNext": "下一页",
					"sLast": "末页"
				}  
	        },
	        fnDrawCallback: function(){

	            if(window.flag == false){
	        		window.flag = true;
	        		var index = localStorage.getItem('pagination_index');
	                localStorage.removeItem('pagination_index');
		        	if( ! index){
		        		index = 1;
		        	}
		        	index -= 1;

		        	$('#memberList').dataTable().fnPageChange(index);
	                
	        	}
            }
	    });

		$('#memberList').delegate('a[data-target="#memberModal"]', 'click', function(){

	    	$('#no').val(Date.parse(new Date()) / 1000);
	    	$('#real_no').val('');
	    	$('#first_name').val('');
	    	$('#last_name').val('');
	    	$('#nickname').val('');
	    	$('#gender').val('');
	    	$('#birthday').val("");
	    	$('#level_id').val("");
	    	$('#tel').val("");
	    	$('#phone').val("");
	    	$('#email').val("");
	    	$('#qq').val("");

	    	if($(this).attr('role') == 'edit'){
	    		localStorage.setItem('pagination_index', $('.pagination .active').find('a').text());
	    		$('#frmMember').attr('action', '/admin/member/edit/' + $(this).parent().parent().attr('data-id'));
	    		$.get('/admin/member/view/' + $(this).parent().parent().attr('data-id'), 
	    			function(data, status){
	    				if(data.status == 'succ'){
	    					var item = data.data;
	    					$('#no').val(item.no);
	    					$('#real_no').val(item.real_no);
					    	$('#first_name').val(item.people.first_name);
					    	$('#last_name').val(item.people.last_name);
					    	$('#nickname').val(item.people.nickname);
					    	$('#gender').val(item.people.gender);
					    	$('#birthday').val(item.people.birthday);
					    	$('#level_id').val(item.level_id);
					    	$('#tel').val(item.people.tel);
					    	$('#phone').val(item.people.phone);
					    	$('#email').val(item.people.email);
					    	$('#qq').val(item.people.qq);
	    				}
	    			}, 'json');
	    	}else{
	    		$('#frmMember').attr('action', '/admin/member/create/');
	    	}
	    });

	    $('#member_level').change(function(){
	    	$('input[type="search"]').val($(this).val()).keyup();
	    });

	    $('#memberList').delegate('a[data-target="#memberLevelModal"]', 'click', function(){
	    	$.get('/admin/member/view/' + $(this).parent().parent().attr('data-id'), 
    			function(data, status){
    				if(data.status == 'succ'){
    					var item = data.data;
    					$('#label_no').text(item.no);
				    	$('#label_nickname').text(item.people.first_name + item.people.last_name + (item.people.nickname.length > 0 ? "(" + item.people.nickname + ")" : ''));
				    	$('#label_phone').text(item.people.phone);
				    	$('#label_level_id').text(item.level.name);
    				}
    			}, 'json');
	    	$('#btnChangeLevel').attr('data-id', $(this).parents('tr').attr('data-id'));
	    });

	    $('#btnChangeLevel').click(function(){
	    	var id = $(this).attr('data-id');
	    	$.post('/admin/member/edit/' + id, 
	    		{
	    			'level_id' : $('#target').val()
	    		}, 
	    		function(data, status){
	    			if(data.status == 'succ'){
	    				$('#memberList').find('tr[data-id="' + id + '"]').find('td:eq(5)').text($('#target').find("option:selected").text());
	    				$('#memberLevelModal').modal('hide');
	    			}
	    		}, 'json');
	    });

	    $('#member-levels').delegate('a[data-target="#confirmModal"]', 'click', function(){
	    	$('#btnConfirm').attr('data-id', $(this).parent().parent().attr('data-id'));
	    });

	    $('#btnConfirm').click(function(){
	    	var id = $(this).attr('data-id');
	    	$.get('/admin/member/level_delete/' + id,
	    		function(data, status){
	    			if(data.status == 'succ'){
	    				$('#member-levels').find('tr[data-id="' + id + '"]').remove();
	    				$('#confirmModal').modal('hide');
	    			}
	    		}, 'json');
	    });

	    $('#memberList').delegate('a[data-target="#confirmMemberModal"]', 'click', function(){
	    	$('#btnConfirmMember').attr('data-id', $(this).parent().parent().attr('data-id'));
	    });

	    $('#btnConfirmMember').click(function(){
	    	var id = $(this).attr('data-id');
	    	$.get('/admin/member/delete/' + id,
	    		function(data, status){
	    			if(data.status == 'succ'){
	    				$('#memberList').find('tr[data-id="' + id + '"]').remove();
	    				$('#confirmMemberModal').modal('hide');
	    			}
	    		}, 'json');
	    });

	    $('#member-levels').delegate('a', 'click', function(){
	    	var obj = $(this);
	    	if(obj.attr('role') == 'save'){
	    		obj.addClass('hide');
	    		obj.next().removeClass('hide');
	    		obj.next().next().removeClass('hide');
	    		obj.parent().parent().find('span').each(function(){
	    			$(this).removeClass('hide');
	    			$(this).next().addClass('hide');
	    			$(this).text($(this).next().val());
	    		});

	    		if(obj.parent().parent().attr('data-id') == undefined || obj.parent().parent().attr('data-id') == ''){
	    			$.post('/admin/member/level_create', 
	    				{
	    					'name' : obj.parent().prev().prev().find('input').val(),
	    					'sort' : obj.parent().prev().find('input').val()
	    				}, 
	    				function(data, status){
	    					if(data.status == 'succ'){
	    						obj.parent().parent().attr('data-id', data.data.id);
	    					}
	    				}, 'json');
	    		}else{
	    			$.post('/admin/member/level_edit/' + obj.parent().parent().attr('data-id'), 
	    				{
	    					'name' : obj.parent().prev().prev().find('input').val(),
	    					'sort' : obj.parent().prev().find('input').val()
	    				}, 
	    				function(data, status){
	    					if(data.status == 'succ'){
	    					}
	    				}, 'json');
	    		}
	    		
	    		
	    	}else if(obj.attr('role') == 'edit'){
	    		obj.addClass('hide');
	    		obj.next().addClass('hide');
	    		obj.prev().removeClass('hide');
	    		obj.parent().parent().find('input').each(function(){
	    			$(this).removeClass('hide');
	    			$(this).prev().addClass('hide');
	    			$(this).val($(this).prev().text());
	    		});
	    	}else if(obj.attr('role') == 'del'){

	    	}
	    });

	    $('#btnAddLevel').click(function(){
	    	$('#member-levels').append(tr, {id: '系统生成', name: '', 'sort': 0}, null);
	    });

	});
</script>

<script type="text/javascript" src="/assets/third-party/parsley/parsley.min.js"></script>
<script type="text/javascript" src="/assets/third-party/parsley/i18n/zh_cn.js"></script>
<script type="text/javascript" src="/assets/third-party/parsley/i18n/zh_cn.extra.js"></script>
<script type="text/javascript">
	$(function(){
		$('#btnSave').click(function(){
			$('#frmMember').submit();
		});
	});
</script>

<script type="text/javascript" src="/assets/third-party/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/assets/third-party/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
	$('input[role="datetime"]').datetimepicker({
		language: 'zh-CN'
	});
});
</script>